<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>萤火虫飞舞动画</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0c0c0c;
  }
  canvas {
    display: block;
  }
</style>
<script>
  window.onload = function() {
    const canvas = document.getElementById('fireflyCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建黄绿色渐变
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'green');

class Firefly {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.speedX = (Math.random() - 0.5) * 2; // 水平速度
    this.speedY = (Math.random() - 0.5) * 2; // 垂直速度
    this.size = Math.random() * 13 + 1;
    this.brightness = Math.random() * 0.5 + 0.5;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    // ctx.fillStyle = `rgba(255, 255, 255, ${this.brightness})`;
    // ctx.fill();
    // 应用黄绿色渐变
    ctx.fillStyle = gradient;
    ctx.fill();
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;

    // 当萤火虫触碰到边界时改变方向
    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
  }
}

const fireflies = [];
const maxFireflies = 100;

for (let i = 0; i < maxFireflies; i++) {
  fireflies.push(new Firefly());
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  fireflies.forEach(firefly => {
    firefly.draw();
    firefly.update();
  });

  requestAnimationFrame(animate);
}

animate();
  }
</script>
</head>
<body>
<canvas id="fireflyCanvas"></canvas>
</body>
</html>